<template>
<div>
<table width="500px" align="center" cellspacing="0" border="1">
   <tr>
       <th>
           全选
           <input 
           type="checkbox" 
           v-model="allcheck"
           @click="changeAll"
           />
        </th>
        <th>
            名称
        </th>
        <th>
            图片
        </th>
        <th>
            价格
        </th>
        <th>
            数量
        </th>
        <th>
            操作
        </th>
   </tr>
   <tr 
   v-for="(item,index) in $store.state.cartsArr"
   :key="index"
   >
       <td>
           <input 
           type="checkbox" 
           v-model="item.ischeck"
           @click="changeone(index)"
           />
       </td>
       <td>
           {{item.name}}
       </td>
       <td>
           <img :src="item.pic" width="50px"/>
       </td>
       <td>
           {{item.price}}
       </td>
       <td>
          <button>+</button>
         {{item.num}}
         <button>-</button>
       </td>
       <td>
            <button>删除</button>
       </td>
   </tr>
</table>
</div>
</template>
<script>

export default{
    data(){
        return {
            allcheck:false   //全选
        }
    },
    methods:{
        changeAll(){  //全选
            //  全选的值取反
            this.allcheck=!this.allcheck
            // 调用mutations中的方法
            this.$store.commit('allchange',this.allcheck)
        },
        changeone(index){  //单选
            // 调用mutatios的方法 传递下标
            this.$store.commit('checkone',index)
            // 判断state中cartsArr中的数据是否全部选中
            // 全选中全选就选中   只要有一个不选中全选就不选中

           this.allcheck=  this.$store.state.cartsArr.every(item=>{
                 return item.ischeck==true
             })
        }
    },
  components:{
    
  }
}
</script>